<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>买入订单详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/style.css" />
		<link rel="stylesheet" href="../css/iconfont3.css" />
		<link rel="stylesheet" href="../../css/title.css" />
		<style>
			body{background-color:#444;}
			.ordertop{
				width: 100%;
				height: auto;
				margin-top: 54px;
				background: rgb(34,34,34);
			}
			.otitle{
				width: 92%;
				margin-left: 4%;
				height: 44px;
				border-bottom: 1px solid rgb(59,59,59);
			}
			.otitle a{
				display: block;
				float: left;
				width: 50px;
				height: 30px;
				background: rgb(70,172,253);
				color: white;
				font-size: 16px;
				line-height: 30px;
				text-align: center;
				margin-top: 7px;
			}
			.otitle span{
				float: right;
				font-size: 16px;
				line-height: 44px;
			}
			.omain{
				width: 92%;
				margin-left: 4%;
				position: relative;
				padding-bottom: 36px;
			}
			.omain p{
				margin-top: 10px;
			}
			.omain a{
				position: absolute;
				display: block;
				width: 68px;
				border: 1px solid rgb(252,69,63);
				font-size: 14px;
				text-align: center;
				height: 30px;
				line-height: 30px;
				color: rgb(252,69,63);
				border-radius: 5px;
				right: 0px;
				bottom: 10px;
			}
			.orderlist{
				width: 100%;
				height: auto;
				margin-top: 10px;
				background: rgb(34,34,34);
				padding: 10px 0px;
				padding-bottom: 36px;
			}
			.order-s{
				margin-left: 10%;
				padding-left:25px;
				border-left: 1px solid rgb(252,69,63);
				padding-bottom: 10px;
				position: relative;
			}
			.order-s h5{
				margin-bottom: 20px;
				font-size: 14px;
				color:rgb(252,69,63);
			}
			.order-s p{
				font-size:14px ;
				color:rgb(252,69,63);
			}
			.success{
				display: block;
				width: 26px;
				height: 26px;
				background: rgb(252,69,63);
				border-radius: 13px;
				text-align: center;
				line-height: 26px;
				color: white;
				font-size: 20px;
				position: absolute;
				left: -13px;
				top: -5px;
			}
			.order-e{
				margin-left: 10%;
				padding-left:25px;
				border-left: 1px solid white;
				padding-bottom: 10px;
				position: relative;
			}
			.order-e h5{
				margin-bottom: 20px;
				font-size: 14px;
			}
			.order-e p{
				font-size:14px ;
			}
			.none{
				display: block;
				width: 26px;
				height: 26px;
				background: white;
				border-radius: 13px;
				text-align: center;
				line-height: 26px;
				color: white;
				font-size: 20px;
				position: absolute;
				left: -13px;
				top: -5px;
			}
			.order-b{
				margin-left: 10%;
				padding-left:25px;
				border-left: 1px solid white;
				position: relative;
			}
			.home_top {
			    padding-top: 0px;
			}
			
			.home_top {
			    z-index: 100000;
			    height: 50px;
			    background-color: #3a3f43;
			    box-shadow: none;
			    display: flex;
			    justify-content: space-between;
			    align-items: center;
			}
			.home_top .mui-title span{
				color: black;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav reg_page home_top">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title"><span lang>买入订单详情</span></h1>
			<a class="country" id="buy_record" lang>记录</a>
		</header>
		
		<div id="main-data"></div>
		<script id='main-template' type="text/template">
			<div class="ordertop">
				<div class="otitle">
					<a>买入</a>
					<span><%=(add_time)%></span>
				</div>
				<div class="omain">
					<p>订单号：<%=(order_sn)%></p>
					<% if(status==1) { %>
						<p>未选择收款人<span style="float:right;"><%=(trade_money)%></span></p>
						<p style="color: white;">订单创建中</p>
						<a id="cancel" onclick="do_cencel('<%=(buy_user_id)%>','<%=(id)%>')">取消</a>
					<% }%>
					
					<% if(status>1 && status<9) { %>
					   <p>收款人:<%=(contacts)%><span style="float:right;"><%=(trade_money)%></span></p>
				       <% if(status==2) { %>
				      	 <p style="color: white;">成功匹配卖出用户<span style="float:right;">实际应付金额:<%=(amount)%></span></p>
				       <% }%>
				       <% if(status==3) { %>
				      	 <p style="color: white;">已打款，等待卖家收款<span style="float:right;">实际应付金额:<%=(amount)%></span></p>
				       <% }%>
				       <% if(status==4) { %>
				      	 <p style="color: white;">卖方已收款，买入成功<span style="float:right;">实际应付金额:<%=(amount)%></span></p>
				       <% }%>
				       <a id="tel" onclick="do_tel('<%=(telephone)%>')">联系他</a>
				    <% }%>
				    
				    <% if(status==9) { %>
						<p>未选择收款人<span style="float:right;"><%=(trade_money)%></span></p>
						<p style="color: white;">已撤销</p>
					<% }%>
					
				</div>
			</div>
			<div class="orderlist">
				<div class="order-s">
					<h5>你创建了<%=(country)%>区买入订单</h5>
					<p>打款人：<%=(buy_bank_account)%></p>
					<p>打款方式：<%=(buy_bank_name)%></p>
					<p>打款账号：<%=(buy_bank_card)%></p>
					<a class="success"><span class="mui-icon mui-icon-checkmarkempty"></span></a>
				</div>
				<div class="order-s">
					<h5>从你的余额扣除 100 余额作为保证金</h5>
					<a class="success"><span class="mui-icon mui-icon-checkmarkempty"></span></a>
				</div>

                <% if(status==1) { %>
				<div class="order-e">
					<h5>等待匹配卖出家用户</h5>
					<a class="none"></a>
				</div>
				<% } else if(status>1 && status!=9) { %>
					<div class="order-s">
					<h5>你成功匹配了【 <%=(contacts)%> 】为收款人</h5>
					<p>收款人：<%=(contacts)%></p>
					<p>收款方式：<%=(bank_name)%></p>
					<p>收款账号：<%=(bank_card)%></p>
					<a class="success"><span class="mui-icon mui-icon-checkmarkempty"></span></a>
				    </div>
				<% }%>
				
				<% if(status<=2) { %>
				<div class="order-e">
					<h5>等待您向卖出用户线下打款</h5>
					<a class="none"></a>
				</div>
				<% } else if(status>2 && status!=9) { %>
				<div class="order-s">
					<h5>您已经向卖出用户线下打款</h5>
					<a class="success"><span class="mui-icon mui-icon-checkmarkempty"></span></a>
				</div>
				<% }%>
				
				<% if(status<=3) { %>
				<div class="order-e">
					<h5>等待卖出用户确认收款</h5>
					<a class="none"></a>
				</div>
				<% } else if(status>3 && status!=9) { %>
				<div class="order-s">
					<h5>卖出用户已经确认收款</h5>
					<a class="success"><span class="mui-icon mui-icon-checkmarkempty"></span></a>
				</div>
				<% }%>
				
				<% if(status==4) { %>
				<div class="order-s" style="border: none;">
					<h5>买入成功</h5>
					<a class="success"><span class="mui-icon mui-icon-checkmarkempty"></span></a>
				</div>
				<% } else { %>
				<div class="order-e" style="border: none;">
					<h5>买入成功</h5>
					<a class="none"></a>
				</div>
				<% }%>
				
				<% if(status==9) { %>
				<div class="order-s" style="border: none;">
					<h5>该笔交易已撤销</h5>
					<a class="success"><span class="mui-icon mui-icon-checkmarkempty"></span></a>
				</div>
				<% }%>
			</div>
		</script>
		
		<script src="../../lang/sellout.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/config.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/sockjs.js"></script>
		<script src="../../js/arttmpl.js"></script>
		<script src="../../resource/transaction/buy_order_detail.js"></script>
		
	</body>

</html>